<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- 多个 checkbox 情况 -->
        <!-- <label for="usa">美国</label>
        <input type="checkbox" name="" v-model="checkNames" value="usa" id="usa">
        <label for="cn">中国</label>
        <input type="checkbox" name="" v-model="checkNames" id="cn" value="cn">
        <label for="en">英国</label>
        <input type="checkbox" name="" v-model="checkNames" id="en" value="en">
        <div>{{checkNames}}</div> -->
        <!-- 单个checkbox 情况 -->
        <label for="agree">同意协议</label>
        <input type="checkbox" name="" id="agree" v-model="aggree">
        <div>{{aggree}}</div>
        <!-- radio 的情况下 -->
        <label for="usa">美国</label>
        <input type="radio" name="" id="usa" value="usa" v-model="picked">
        <label for="cn">中国</label>
        <input type="radio" name="" id="cn" value="cn" v-model="picked">
        <label for="en">英国</label>
        <input type="radio" name="" id="en" value="en" v-model="picked">
        <div>{{picked}}</div>
        <!-- 下拉 单选的逻辑 -->
        <select name="" id="" v-model="selectedValue">
            <option value="usa">美国</option>
            <option value="cn" selected>中国</option>
            <option value="en">英国</option>
        </select>
        <h1>{{selectedValue}}</h1>
        <!-- 多选的逻辑  select上面添加一个属性 multiple
                要实现多选，除了添加multiple属性之外，还要
                选的时候，同时按下ctrl键，才可以
        -->
        <select name="" id=""  multiple v-model="selectedValues">
            <option value="usa">美国</option>
            <option value="cn" selected>中国</option>
            <option value="en">英国</option>
        </select>
        <h1>{{selectedValues}}</h1>
    </div>
    <script src="./vue.js"></script>
    <script>
        let vm = new Vue({
            el:"#app",
            data:{
                checkNames:[],
                aggree:false,
                picked:"",
                selectedValue:"",// 单选的值
                selectedValues:[]
            }
        })
    </script>
</body>
</html>